<!DOCTYPE html>
<html>
    <head>
        <!--编码-->
        <meta charset="utf-8"/>

        <!--页面标题-->
        <title>League of Legends</title>

        <!--页面图标-->
        <link rel="shortcut icon" href="./favicon.ico">

        <!--引入css-->
        <link href="index.css" rel="stylesheet">
        <link href="client.css" rel="stylesheet">

        <!--引入vue.js库-->
        <script src="./vue.js"></script>
        <!-- <script src="./vue3.js"></script> -->
        <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->

        <!--引入ElementUI库-->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    </head>
    <body>
        <div id="app">
            <!--游戏Logo-->
            <img v-if="isLoading" src="./Resources/Iamges/gameLogo.png" class="gameLogo" oncontextmenu="noContextMenu(event)">

            <!--加载界面-->
            <el-container v-if="isShowLoadingPannel" oncontextmenu="noContextMenu(event)" class="pannel loadingPannel" style="background: url(./Resources/Iamges/loading.png);">
                <el-main>
                    <el-progress :percentage="progressValue" :stroke-width="11" style="margin-top: 538px; width:19%; margin-left:656px" :format="()=>{}"></el-progress>
                </el-main>
            </el-container>

             <!--客户端登录窗口-->
            <div @click="playBgm" v-if="!isLogin">
                <el-container class="pannel"  oncontextmenu="noContextMenu(event)">
                    <el-aside id="loginBar" width="440px">
                        <div id="loginText">
                            <!--账号密码错误提示-->
                            <div style="margin-left: 100px; margin-top: 80px; position: absolute;">
                                <el-popover
                                    placement="right"
                                    width="200"
                                    v-model="isLoginFail"
                                    visible-arrow="true"
                                    offset="100px 100px">
                                    <p style="color: rgb(209, 0, 228); font-size: 15px;">你的登录信息匹配不上我们系统中的账号。</p> 
                                </el-popover>
                            </div>

                            <!--拳头LOGO-->
                            <div id="riotLogo"></div>
                            
                            <b>登录</b>
                        </div>
    
                        <!--用户名 密码 输入框-->
                        <div style="width: 70%; margin-left: auto; margin-right: auto;">
                            <el-form class="inputBar" ref="form" :model="input">
                                <el-form-item>
                                    <el-input placeholder="用户名" v-model="input.userId"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-input type="password" placeholder="密码" v-model="input.password" show-password></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                        
                        <!--第三方账号登录-->
                        <el-row>
                            <el-button size="medium" type="primary" style="padding: 9px 12px; background-color: rgb(48, 120, 255); border: 0;"><b>FaceBook</b></el-button>
                            <el-button size="medium" style="padding: 9px 23px;"><b>Google</b></el-button>
                            <el-button size="medium" type="info" style="padding: 9px 27px; background-color: black; border: 0;"><b>Apple</b></el-button>
                        </el-row>
    
                        <!--保持登录选项-->
                        <el-checkbox id="checkBox"><b>保持登陆状态</b></el-checkbox>
                        
                        <!--登录按钮-->
                        <div style="margin-top: 200px;">
                            <el-button @click.stop="login" icon="el-icon-right" style=" padding: 20px 20px; font-size: 40px;" circle></el-button>
                        </div>
                        
                        <!--账号注册与找回-->
                        <el-button type="text" style=" margin-top: 20px; color: rgba(167, 167, 167, 0.671);"><b>无法登录？</b></el-button>
                        <el-button type="text" style=" margin-top: 20px; color: rgba(167, 167, 167, 0.671);"><b>创建账号</b></el-button>
    
                        <!--版本号-->
                        <el-button type="text" style="margin-left: 300px; margin-top: 0px; color: rgba(167, 167, 167, 0.671);"><b>{{version}}</b></el-button>
    
                    </el-aside>
    
                    <!--右侧图片 视频-->
                    <el-main id="loginImage">
                        <video id="loginVideo" src="./Resources/Iamges/login_page.mp4" autoplay loop preload muted></video>
                    </el-main>
                    
                </el-container>
            </div>
        

            <!--客户端窗口-->
            <div v-if="isShowClient" >
                <el-container id="clientPannel" oncontextmenu="noContextMenu(event)"> 
                    <!--左侧部分-->
                    <el-container id="leftArea">
                        <!--大导航栏-->
                        <el-header class="headBar" height="100px">
                            <span>
                                <a style="color:antiquewhite; font-size: 30px; cursor: pointer; margin-left: 50px; margin-right: 130px;">PLAY</a>
                                <div class="bigNav" style="border-left: 0;">
                                    <img src="./Resources/Iamges/arrow.png" style="position: absolute;transform: translate(9px, -31px);">
                                    <b>主页</b>
                                </div>

                                <div class="bigNav" style="width: 138px;">
                                    <b>云顶之弈</b>
                                </div>

                                <div class="bigNav" style="width: 138px; margin-right: 90px; border-right: 0;">
                                    <b>冠军杯赛</b>
                                </div>

                                <div class="bigNav" style="font-size: 17px; width: 85px;transform: translate(0, -10px); border-left: 0;" >
                                    <a>通行证</a>
                                </div>

                                <div class="bigNav" style="font-size: 17px;width: 85px;transform: translate(0, -10px);">
                                    生涯
                                </div>

                                <div class="bigNav" style="font-size: 17px;width: 85px;transform: translate(0, -10px);">
                                    藏品
                                </div>

                                <div class="bigNav" style="font-size: 17px;width: 85px;transform: translate(0, -10px);">
                                    战利品
                                </div>

                                <div class="bigNav" style="font-size: 17px;width: 85px; transform: translate(0, -10px);">
                                    商城
                                </div>
                            </span>
                        </el-header>

                        <el-main class="bodyBar" style="padding: 0;">
                            <el-container>
                                <!--小导航栏-->
                                <el-header id="leftBodyHeadBar" height="100px">
                                    <ul class="nav">
                                        <li>首页</li>
                                        <li>全球总决赛</li>
                                        <li>无双战境</li>
                                        <li>TOC航海之旅</li>
                                        <li>航海探秘</li>
                                        <li>福星计划</li>
                                        <li>云顶攻略</li>
                                        <li>峡谷攻略</li>
                                    </ul>
                                </el-header>
                                <el-main>
                                </el-main>
                            </el-container>
                            <div style="margin-top: 47%;">
                                <a href="https://lol.qq.com" style="color: rgba(221, 204, 130, 0.9);  margin-left: 3%; font-size: 15px;">
                                    <u>当前版本：{{version}}</u>
                                </a>
                            </div>
                        </el-main>
                    </el-container>
                    
                    <!--右侧部分-->
                    <el-aside id="rightBar" width="280px">
                        <el-container>
                            <!--右侧顶部-->
                            <el-header class="headBar" height="100px" style="padding: 0;">
                                <el-container>
                                    <!--玩家游戏头像-->
                                    <el-aside width="100px">
                                        <el-avatar style="margin-left: 20px; margin-top: 20px;" :size="65" :src="currUser.img" class="touXiang"></el-avatar>
                                        <!--当前玩家的信息卡-->
                                        <div class="currUserCard">
                                            <!--上-->
                                            <div style="border-bottom: 1px solid rgb(30, 62, 90); height: 95px;overflow: hidden; background-size: 100% auto;"
                                            :style="{backgroundImage: 'url(' + currUser.cardBg + ')'}">
                                            </div>
                                        
                                            <!--中-->
                                            <div style="border-bottom: 1px solid rgba(92, 92, 92, 0.5); height: 120px; padding-left: 35px;">
                                                <el-avatar class="touXiang" :src="currUser.img" :size="90" style="border: 5px solid rgb(49, 49, 119); margin-top: -10px; margin-left: 5px"></el-avatar>
                                                <p style="font-size: 25px; margin-top: -70px; margin-left: 120px; line-height: 25px;" class="friendName">
                                                    <b>{{currUser.gameId}}</b><br>
                                                    <a style="font-size: 15px; color: rgba(255, 248, 218, 0.7); ">{{currUser.rank}}</a>
                                                </p>
                                            </div>
                                        
                                            <!--下-->
                                            <div>
                                                <p :style="{color: state[currUser.gameState].color}" style="vertical-align: middle; font-size: 16px; margin-top: 10px; margin-left: 30px;" class="friendName">
                                                    *{{state[currUser.gameState].text == "游戏中" ? (gameMod[Math.floor(Math.random()*gameMod.length)] + "-&nbsp" + hero[Math.floor(Math.random()*hero.length)]) :state[currUser.gameState].text}}
                                                </p>
                                            </div>
                                        </div>
                                    </el-aside>
                                    

                                    <!--玩家游戏ID-->
                                    <el-main style="padding: 0;">
                                        <p style="color: rgb(253, 255, 240); font-size: 18px; margin-bottom: 5px; margin-top: 35px;">
                                            <b>{{currUser.gameId}}</b>
                                        </p>
                                        <p :style="{color: state[currUser.gameState].color}" style="margin-top: 5px; cursor: pointer;" @click="switchState(currUser)">
                                            *{{state[currUser.gameState].text}}
                                        </p>
                                    </el-main>
                                </el-container>
                            </el-header>
                            <el-main class="bodyBar" style="padding: 0;">
                                <p style="margin-top: 8px; margin-left: 10px; color: rgb(197, 189, 152); font-size: 15px;">
                                    <b>好友列表</b><i @click="isAddFriendWinShow = isShowBackPannel = true" class="el-icon-user-solid friendBtn" style="cursor: pointer; font-size: 20px; margin-left: 180px;"></i>
                                    <ul style="padding-left: 0;">
                                        <!--一个好友位-->
                                        <li v-for="f in currUser.friends" :key="f.index"  style="height: 60px; margin-right: 10px;" class="friendBox" oncontextmenu="openMenu(event)" :thisUser="f.gameId">
                                            <el-container style="padding-top: 7px; padding-left: 5px;" :style="{opacity: f.gameState==0 ? 0.5 : 1}">
                                                <el-aside width="50px">
                                                    <!--好友头像-->
                                                    <el-avatar :src="f.img" :size="40" style="margin-top: 3px; margin-left: 5px" class="touXiang"></el-avatar>
                                                </el-aside>
                                                <!--好友id与游戏状态-->
                                                <el-main style="padding: 0;">
                                                    <p style="font-size: 16px; margin-top: 0; margin-bottom: 2px;" class="friendName">
                                                        {{f.gameId}}
                                                    </p>
                                                    <p style="margin-top: 0; font-size: 15px; margin-bottom: 0;" :style="{color: state[f.gameState].color}">
                                                        *{{state[f.gameState].text}}
                                                    </p>
                                                </el-main>
                                            </el-container>
                                            
                                            <!--玩家信息卡-->
                                            <div class="userCard">
                                                <!--上-->
                                                <div style="border-bottom: 1px solid rgb(30, 62, 90); height: 95px;overflow: hidden; background-size: 100% auto;"
                                                :style="{backgroundImage: 'url(' + f.cardBg + ')'}">
                                                </div>

                                                <!--中-->
                                                <div style="border-bottom: 1px solid rgba(92, 92, 92, 0.5); height: 120px; padding-left: 35px;">
                                                    <el-avatar class="touXiang" :src="f.img" :size="90" style="border: 5px solid rgb(49, 49, 119); margin-top: -10px; margin-left: 5px"></el-avatar>
                                                    <p style="font-size: 25px; margin-top: -70px; margin-left: 120px; line-height: 25px;" class="friendName">
                                                        <b>{{f.gameId}}</b><br>
                                                        <a style="font-size: 15px; color: rgba(255, 248, 218, 0.7); ">{{f.rank}}</a>
                                                    </p>
                                                </div>

                                                <!--下-->
                                                <div>
                                                    <p :style="{color: state[f.gameState].color}" style="vertical-align: middle; font-size: 16px; margin-top: 10px; margin-left: 30px;" class="friendName">
                                                        *{{state[f.gameState].text == "游戏中" ? (gameMod[Math.floor(Math.random()*gameMod.length)] + "-&nbsp" + hero[Math.floor(Math.random()*hero.length)]) :state[f.gameState].text}}
                                                    </p>
                                                </div>
                                            </div>
                                        </li>

                                    </ul>
                                </p>
                            </el-main>
                        </el-container>
                    </el-aside>

                </el-container>


                <!--添加好友窗口-->
                <div v-if="isAddFriendWinShow" class="windowBox" style="height: 650px; width: 730px;" oncontextmenu="noContextMenu(event)">
                    <br><b style="margin-left: 315px; font-size: 25px; color: rgb(197, 189, 152);">添加好友</b><br><br>
                    <a style="margin-left: 20px; color: rgb(214, 209, 188); font-size: 14px;">已经知道好友的召唤师名字?&nbsp&nbsp快给他发送好友请求吧!</a><br>
                    <i class="el-icon-search" style="color: rgba(255, 255, 239, 0.7); font-size: 18px;padding-left: 35px; margin-right: -55px;"></i>
                    <input class="clientInput" v-model="addFriendInput" placeholder="玩家名字"></input>
                    <button class="cbtn2" @click="addFriendResult = addFriend(currUser, addFriendInput)">
                        <a style="font-size: 15px; color: rgb(197, 194, 155); background-color: rgba(0, 0, 0, 0.253);">添加好友</a>
                    </button>
                    <p class="friendName" style="margin-left: 20px;"><i>{{addFriendResult}}</i></p>
                    <button class="cbtn" @click="isAddFriendWinShow = isShowBackPannel = false">
                        <b style="font-size: 20px;">完成</b>
                    </button><br><br>
                    <p class="friendName" style="margin-left: 20px;"><b>最近一起游戏过</b></p>
                </div>


                <!--幕布-->
                <div v-if="isShowBackPannel" class="blackPannel" oncontextmenu="noContextMenu(event)"></div>
            </div>

            <!--右键窗口-->
            <div class="menu">
                <ul class="menu-list">
                    <li class="menu-item">
                        <span>邀请加入游戏</span>
                    </li>
                    
                    <li class="menu-item">
                        <span>发送信息</span>
                    </li>
                    
                    <li class="menu-item">
                        <span>观战</span>
                    </li>
                    
                    <li class="menu-item">
                        <span>查看生涯</span>
                    </li>

                    <li class="menu-item">
                        <span>添加备注</span>
                    </li>
                    
                    <li class="menu-item">
                        <span>移动</span>
                    </li>
                    
                    <li class="menu-item" @click="removeFriend(currUser, chosenUser)">
                        <span>解除好友关系</span>
                    </li>
                    
                    <li class="menu-item">
                        <span>拉入聊天黑名单</span>
                    </li>
                </ul>
            </div>
        </div>




        <!--JavaScript代码-->
        <script>
            //登陆界面背景音乐
            const loginBgm = new Audio("./Resources/Sounds/loginSound.mp3");

            //禁用右键
            noContextMenu = (e) =>{
                //阻止默认事件
                e.preventDefault();
            }

            
            //右键事件 打开右键菜单窗口
            openMenu = (e)=>{
                //阻止默认事件
                e.preventDefault();

                //获取选择的玩家
                vm.chosenUser = vm.findUserByGameID(e.currentTarget.getAttribute("thisUser"));
                console.log(vm.findUserByGameID(e.currentTarget.getAttribute("thisUser")));

                const menu = document.querySelector(".menu");
                menu.classList.add("is-active");
                menu.style.left = `${e.clientX}px`;
                menu.style.top = `${e.clientY}px`;

                console.log("右键被点击了");
            }
            //左键点任意位置关闭 右键菜单窗口
            window.onclick = () =>{
                const menu = document.querySelector(".menu");
                menu.classList.remove("is-active");
            }



            //vm
            const vm = new Vue({
                el:"#app",
                data(){
                    return {
                        //版本号
                        version: "V50.0.6",
                    
                        //输入的 用户名 密码 信息
                        input:{
                            userId: undefined,
                            password: undefined,
                        },

                        //游戏状态
                        state:[
                            {index: 0, text: "离线", color: "#A9A9A9"},
                            {index: 1, text: "在线", color: "#32CD32"},
                            {index: 2, text: "离开", color: "#A9A9A9"},
                            {index: 3, text: "队列中", color: "#00BFFF"},
                            {index: 4, text: "游戏中", color: "#00BFFF"},
                        ],

                        //游戏模式（小彩蛋）
                        gameMod:["嚎哭深渊（匹配模式）", "召唤师峡谷（单排/双排）", "召唤师峡谷（灵活5v5）", "召唤师峡谷（轮换模式）"],
                        hero:["无极剑圣", "疾风剑豪", "无双剑姬", "蛮族之王", "德邦总管"],

                        //用户信息 （账号，密码，游戏id 等信息）
                        userInfo:[
                            {
                                index: 0,                                                               //用户索引 
                                userId:"123456",                                                        //用户名
                                password:"123456",                                                      //密码
                                gameId:"Yo很fan不想打了",                                                //玩家游戏ID
                                img:"https://opgg-static.akamaized.net/images/profile_icons/profileIcon5331.jpg",  //玩家头像
                                cardBg: "https://game.gtimg.cn/images/lol/act/img/skin/big104003.jpg",  //玩家卡片的背景
                                gameState: 1,                                                           //玩家游戏状态
                                rank: "华贵铂金Ⅳ（单排/双排）",
                                friends:[],                                                             //玩家的好友列表
                            },
                            {
                                index: 1, 
                                userId:"asdasd", 
                                password:"asdasd", 
                                gameId:"ly135250", 
                                img:"https://game.gtimg.cn/images/lol/act/img/profileicon/1377.png",
                                cardBg: "https://game.gtimg.cn/images/lol/act/img/skin/big76000.jpg",  
                                gameState: 0,
                                rank: "华贵铂金Ⅱ（单排/双排）",
                                friends:[],
                            },
                            {
                                index: 2, 
                                userId:"aaaaaa", 
                                password:"ssssss", 
                                gameId:"好兄弟这样肘胃", 
                                img:"https://game.gtimg.cn/images/lol/act/a20210625icon/avatar19.png",
                                cardBg: "https://game.gtimg.cn/images/lol/act/img/skin/big104018.jpg",  
                                gameState: 2,
                                rank: "荣耀黄金Ⅲ（单排/双排）",
                                friends:[],
                            },
                            {
                                index: 3, 
                                userId:"ssssss", 
                                password:"aaaaaa", 
                                gameId:"Hide on bush", 
                                img:"https://game.gtimg.cn/images/lol/act/img/profileicon/6.png",
                                cardBg: "https://game.gtimg.cn/images/lol/act/img/skin/big238010.jpg",  
                                gameState: 4,
                                rank: "最强王者（单排/双排）",
                                friends:[],
                            },
                            {
                                index: 4, 
                                userId:"qweqwe", 
                                password:"qweqwe", 
                                gameId:"打提莫的都是坏人", 
                                img:"https://opgg-static.akamaized.net/images/profile_icons/profileIcon5294.jpg",
                                cardBg: "https://game.gtimg.cn/images/lol/act/img/skin/big555044.jpg",  
                                gameState: 3,
                                rank: "傲视宗师（单排/双排）",
                                friends:[],
                            },
                            {
                                index: 5, 
                                userId:"zxczxc", 
                                password:"zxczxc", 
                                gameId:"爱情陷阱丶张嘉文", 
                                img:"https://opgg-static.akamaized.net/images/profile_icons/profileIcon502.jpg",
                                cardBg: "https://game.gtimg.cn/images/lol/act/img/skin/big104003.jpg",  
                                gameState: 0,
                                rank: "超凡大师（单排/双排）",
                                friends:[],
                            },
                            {
                                index: 6, 
                                userId:"dddddd", 
                                password:"dddddd", 
                                gameId:"爷傲丶奈我何", 
                                img:"https://game.gtimg.cn/images/lol/act/img/profileicon/29.png",
                                cardBg: "https://game.gtimg.cn/images/lol/act/img/skin/big157010.jpg",  
                                gameState: 0,
                                rank: "荣耀王者⭐100",
                                friends:[],
                            },
                        ],

                        //当前用户
                        currUser: undefined,

                        //右键选择的玩家
                        chosenUser:{},

                        //登陆状态
                        isLogin: false,

                        //是否登录失败
                        isLoginFail: false,

                        //是否正在加载
                        isLoading: false,

                        //是否显示加载画面
                        isShowLoadingPannel: false,

                        //是否显示客户端
                        isShowClient: false,

                        //进度条属性
                        progressColor:[{color: "red", percentage: 100}],
                        progressValue: 0,

                        //添加好友窗口输入内容 与 结果
                        addFriendInput: undefined,
                        addFriendResult: "",
                        isAddFriendWinShow: false,


                        //是否显示黑幕
                        isShowBackPannel: false,
                    }
                },
                methods:{
                    //循环播放背景音乐
                    playBgm(){
                        loginBgm.loop = true;
                        loginBgm.volume = 0.5;
                        loginBgm.play();
                    },

                    //Login
                    login(){  
                        for(let i = 0;i < this.userInfo.length;i++){
                            if(this.userInfo[i].userId == this.input.userId && this.userInfo[i].password == this.input.password){
                                this.currUser = this.userInfo[i];
                                this.currUser.gameState = 1;    //将当前玩家的游戏状态改为【在线】
                                this.sortFriendBarByState();    //重新排序好友栏
                                
                                setTimeout(()=>{
                                    this.loading();
                                }, 1000);

                                this.isLogin = true;
                                loginBgm?.pause();
                                return;
                            }
                        }
                        this.input.password = "";
                        this.input.userId = "";
                        this.isLoginFail = true;
                    },

                    //登录加载
                    loading(){
                        this.isLoading = true;
                        setTimeout(()=>{
                            this.isShowLoadingPannel = true;
                            const t = setInterval(()=>{
                                this.progressValue += 5;
                                if(this.progressValue >= 100)clearInterval(t);
                            }, 60);
                            this.isLoading = false;

                            setTimeout(() => {
                                this.isShowLoadingPannel = false;
                                this.isShowClient = true;
                            }, 3000);

                        }, (Math.random()*2 + 3) * 1000);
                    },
                    
                    //通过【游戏Id】获取【userInfo对象】
                    findUserByGameID(gameId){
                        for(let i = 0;i < this.userInfo.length;i++){
                            if(this.userInfo[i].gameId == gameId){
                                return this.userInfo[i];
                            }
                        }
                        console.log("找不到该召唤师");
                    },

                    /*************************
                        为玩家添加好友    需要两个参数：1.为谁添加好友（userInfo对象） 2.要添加的玩家id（字符串）
                        添加成功返回值为 true  添加失败返回值为错误原因字符串
                    **************************/
                    addFriend(user, fgameId){
                        //判断该玩家是否是自己
                        if(fgameId == user.gameId){
                            return "无法添加自己为好友";
                        }

                        const fuser = this.findUserByGameID(fgameId);
                        //判断该玩家是否存在
                        if(fuser){
                            //判断该玩家是否已经为好友
                            if(user.friends.indexOf(fuser) != -1){
                                return "无法重复添加好友";
                            }
                            user.friends.push(fuser);
                            console.log("成功将", fuser.gameId, "添加为", user.gameId, "的好友");

                            //自动排序
                            this.sortFriendBarByState();
                            
                            return "成功将 '" + fuser.gameId + "'添加为 '" + user.gameId + "' 的好友";
                        }
                        else
                            return "找不到该召唤师";
                    },
                    
                    //切换游戏状态  user：需要切换状态的对象
                    switchState(user)
                    {
                        //如果当前状态是【离开】就切换为【在线】  否则都切换为【离开】
                        if(user.gameState == 2){
                            user.gameState = 1;
                        }
                        else
                            user.gameState = 2;
                    },

                    //自动按照【游戏状态】排序当前登录的玩家的好友栏（只看是否为【离线】状态,【离线】状态排下面）
                    sortFriendBarByState(){
                        this.currUser.friends.sort((a, b)=>{
                            return ((a.gameState == 0? 1: 0) - (b.gameState == 0? 1: 0));
                        })
                    },

                    //移除好友
                    removeFriend(user, friend){
                        if(this.currUser.friends.indexOf(friend) != -1){
                            this.currUser.friends.splice(this.currUser.friends.indexOf(friend), 1);
                            console.log("已将 '", friend.gameId, "' 移出 '", user.gameId, "' 的好友列表");
                            return;
                        }
                        else{
                            console.log("'", friend.gameId, "' 不是 '", user.gameId, "' 的好友");
                        }
                    }


                },
                mounted() {
                    //UpDate 0.2s
                    setInterval(()=>{
                        if(this.isShowClient && this.currUser){
                            this.sortFriendBarByState();
                        }
                    }, 200)
                },
            });
            
        </script>
    </body>
</html>